<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>球球大作战</title>
  <script src="../lib/jq.js"></script>
  <script src="../lib/vue.js"></script>
  <script src="../lib/socket-client.js"></script>
  <script src="../lib/easel.js"></script>
  <script src="../lib/tween.js"></script>
  <link rel="stylesheet" href="./src/css/circle.css">
</head>

<body>

  <div id="app">
    <div class="wrapper">
      <div class="home-page page">
        <h1 class="ac">球球大作战</h1>

        <div class="btns ac">
          <template v-if="linkStatus">
            <button class="btn" @click="jump('roomOption')">创建房间</button>
            <button class="btn" @click="jump('room')">加入房间</button>
          </template>
          <template v-else>
            <button class="btn" @click='link'>连接服务器</button>
          </template>
        </div>
      </div>
      <div class="game-page page">
        <canvas id="game" width="1200" height="700"></canvas>
      </div>
      <div class="roomOption-page page">
        <h2>房间配置</h2>

        <div class="content">
          <div class="item">
            <label for="roomStatus">是否公布: </label>
            <input type="checkbox" name="" v-model="roomStatus" id="roomStatus">
          </div>
        </div>

        <div class="btns ac">
          <button class="btn" @click="createRoom">创建</button>
        </div>
      </div>
      <div class="create-page page">
        <h2>{{ currentRoomInfo.masterName }}的房间 <span v-if="currentRoomInfo.status == 0"> - 私密</span></h2>
        <p class="tc">人数: <span>{{ currentRoomInfo.playerList && currentRoomInfo.playerList.length }}</span> /
          {{ currentRoomInfo.maxPlayerNum }}</p>

        <div class="roomKey">
          <p>{{ currentRoomInfo.key }}</p>
          <i>将密令复制给朋友加入游戏吧</i>
        </div>

        <div class="content">
          <ul>
            <li v-for="item in currentRoomInfo.playerList">
              <span :style="{color: item.id == io.id ? 'rgb(125, 216, 125)' : 'white'}">
                {{ item.username }}
              </span>
              <!-- <span v-if="item.id == io.id"> &lt; 你就是这个沙雕</span> -->
              <span v-if="item.id == currentRoomInfo.master"> &lt; 房主</span>
              <template v-else>
                <span v-if="item.ready == 0" style="color: rgb(226, 84, 84)">(未准备)</span>
                <span v-else="item.ready == 1" style="color: rgb(125, 216, 125)">(准备)</span>
                <a href="#" @click="shitRoom(item.id)" v-if="currentRoomInfo.master == io.id">踢出房间</a>
              </template>
            </li>
          </ul>
        </div>

        <div class="btns ac">
          <button class="btn" @click='startGame' v-if="io.id == currentRoomInfo.master">
            开始游戏
          </button>
          <button class="btn" v-else @click="selectReady">
            <template v-if="isReady">取消</template>准备
          </button>
          <button class="btn" @click="leaveRoom()">退出房间</button>
        </div>
      </div>
      <div class="input inputName-page page">
        <h2>输入你的名称</h2>

        <input type="text" @keyup.enter="sendUsername(true)" v-model="username" placeholder="最多6个字符, 不能为空, 不要搞事情！"
          class="ac">

        <div class="btns ac">
          <button class="btn" @click="sendUsername(true)">
            确认
          </button>
        </div>
      </div>
      <div class="input inputRoomKey-page page">
        <h2>输入房间密令</h2>

        <input type="text" @keyup.enter="addRoom()" v-model="roomKey" placeholder="10个字符, 不能为空, 不要搞事情！" class="ac">

        <div class="btns ac">
          <button class="btn" @click="addRoom()">
            确认
          </button>
          <button class="btn" @click="jump('room')">
            返回
          </button>
        </div>
      </div>
      <div class="room-page page">
        <h2>房间列表</h2>

        <div class="content">
          <ul>
            <li v-for="item in roomList">
              <p>
                {{ item.username }}的房间 <span v-if="item.isGame">---游戏中---</span> ({{ item.playerNum }}/{{ item.maxPlayerNum }})
                <a href="#" v-if="!item.isGame" @click="addRoom(item.key)">加入房间</a>
              </p>
            </li>
          </ul>
          <p class="tc" v-if="!roomList.length" style="color: #666">没有任何房间</p>
        </div>

        <div class="btns ac">
          <button class="btn" @click="jump('inputRoomKey')">密令加入</button>
          <button class="btn" @click="jump('home')">返回首页</button>
        </div>
      </div>
      <div class="loading-page">
        <div class="loading-content c">
          <img class="rotate icon" src="../assets/icon/loading.png" alt="">
          <p class="loading-info">{{ loadingInfo }}</p>
        </div>
      </div>
      <div class="messageBox" v-if="linkStatus || msgStatus">
        <div class="overhidden">
          <ul>
            <li v-for="item in messageList">
              <i>{{ item.data.area }}</i>
              <i>{{ parseDate(item.time) }}</i>
              <template v-if="item.data.type == 'player'">
                <p>
                  {{ item.data.name }}: {{ item.data.msg }}
                </p>
              </template>
              <template v-else-if="item.data.type == 'system'">
                <p :style="{color: item.data.color || 'white'}">
                  系统: {{ item.data.msg }}
                </p>
              </template>
              <template v-else>
                <p>
                  未知信息: {{ item.data.msg }}
                </p>
              </template>
            </li>
          </ul>
        </div>
        <!-- <div class="screen"></div> -->
        <select class="selectMessageType" v-model="sendMessageType">
          <option value="global">全服</option>
          <option value="queue">队伍</option>
        </select>
        <input type="text" v-model="sendMessageVal" class="inputMessage" @keyup.enter="sendMessage"
          placeholder="输入信息回车发送">
      </div>
    </div>
  </div>

  <script src="./src/js/view.js"></script>
  <script src="./src/js/circle/game.js"></script>
  <script src="./src/js/circle/action.js"></script>
  <script src="./src/js/circle/data.js"></script>
  <script src="./src/js/circle/app.js"></script>
</body>

</html>